﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文件系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/zTree3.5/css/zTreeStyle/zTreeStyle.css}"/>
    <script type="text/javascript" th:src="@{/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/timeFormat.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/zTree3.5/js/jquery.ztree.all.min.js}"></script>
</head>
<body>
<div class="container-fluid" style="margin-top: 30px;">
    <div class="row">
        <!--<div class="col-md-3" style="BORDER-RIGHT:#999999 1px dashed;height:800px;overflow-y: scroll">-->
        <div class="col-md-3" style="height:800px;overflow-y: scroll">
            <ul id="tree" class="ztree" style="width:100%; overflow:auto;"></ul>
        </div>
        <div class="col-md-9">
            <div class="row" style="text-align: center">
                <div class="col-md-6">
                    <strong>服务器IP : <label id="serverIp" th:text="${serverIp}">127.0.0.1</label></strong>
                </div>
                <div class="col-md-6">
                    <strong>服务器时间 : <label id="serverTime"></label></strong>
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="col-md-5">
                    <form class="form-inline">
                        <label>当前目录
                            <small id="fileCount">(0)</small>
                            :</label>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="currDir" disabled type="text" style="width: 200%" value=""
                                       class="form-control input-sm">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4">
                    <form class="form-inline">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="hidden" id="dirId">
                                <input type="text" class="form-control input-sm" placeholder="文件夹名称">
                            </div>
                        </div>
                        <button type="button" onclick="createDir();" class="btn btn-success btn-sm">提交</button>
                    </form>
                </div>
                <div class="col-md-3">
                    <button type="button" onclick="delDirMulit();" class="btn btn-danger btn-sm">删除</button>
                    &nbsp;&nbsp;
                    <button type="button" onclick="showModel();" class="btn btn-warning btn-sm">上传</button>
                    &nbsp;&nbsp;
                    <button type="button" onclick="window.location=ctx" class="btn btn-success btn-sm">首页</button>
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="col-md-12">
                        <table class="table table-hover table-condensed table-striped">
                            <thead>
                            <th width="55%">
                                <input type="checkbox" id="selectAll"/>
                                文件(夹)名称
                            </th>
                            <th width="10%">大小</th>
                            <th width="20%">最后修改时间</th>
                            <th width="15%">操作</th>
                            </thead>
                            <tbody id="tabBody">

                            </tbody>
                        </table>
                </div>
            </div>
        </div>
    </div>

    <div id="myModal" style="display: none" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">文件上传</h4>
                </div>
                <div class="modal-body">
                    <input type="file" id="file" multiple/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="upload">上传</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript" th:inline="javascript">
    var ctx = [[@{/}]];ctx = ctx.substr(0, ctx.length - 1);<!--获取项目根路径-->
    var treeObj;

    var serverTime = [[${serverTime}]];

    $(document).ready(function () {
        $.fn.zTree.init($("#tree"), setting);
        treeObj = $.fn.zTree.getZTreeObj("tree");
        changeTime();
        setInterval(changeTime,1000);

        dealWithCheckBox();

    });


    function selectEle(who){
        $(who).parent().find("input[type='checkbox']").each(function () {
            this.checked = !this.checked;
        });
    }

    function dealWithCheckBox(){
        $("#selectAll").click(function(){
            var selected = $(this).prop("checked");
            if(selected){
                $("input[name='item']").each(function(){
                    $(this).prop("checked",true);
                });
            }else{
                $("input[name='item']").each(function(){
                    $(this).prop("checked",false);
                });
            }
        });
    }

    function changeTime(){
        serverTime += 1000;
        var timeStr = datetimeFormat_1(serverTime);
        $("#serverTime").html(timeStr);
    }

    function reloadNode(){
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length>0) {
            treeObj.reAsyncChildNodes(nodes[0], "refresh");
            zTreeOnClick(null,null,nodes[0]);
        }
    }

    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        async: {
            enable: true,
            url: ctx + "/tree/async",
            autoParam: ["id", "level"],
            type: "get"
        },
        callback: {
            onClick: zTreeOnClick
        }
    };


    function zTreeOnClick(event, treeId, treeNode) {
        $.ajax({
            type: "get",
            url: ctx + "/tree/async",
            data: {id: treeNode.id, isParent: true},
            dataType: "text",
            async: false,
            success: function (data) {
                var treeList = $.parseJSON(data);
                var html = "";
                var foldSrc = ctx + "/images/fold.png";
                var fileSrc = ctx + "/images/file.png";

                for (var i = 0; i < treeList.length; i++) {
                    html += "<tr>";

                    html += "<td style='cursor: pointer' onclick='selectEle(this);'>";

                    html += "<label>";
                    html += '<input name="item" type="checkbox" value="';
                    html += treeList[i].id;
                    html += '"/>';
                    html += "</label>";

                    if (treeList[i].isParent) {
                        html += '<img style="height: 15px;" src="' +
                                foldSrc +
                                '"/>';
                    } else {
                        html += '<img style="height: 15px;" src="' +
                                fileSrc +
                                '"/>';
                    }

                    html += "&nbsp;&nbsp;";
                    html += "<span>";
                    html += treeList[i].name
                    html += "</span>";
                    html += "</td>";

                    html += "<td>";
                    html += treeList[i].sizeStr
                    html += "</td>";

                    html += "<td>";
                    html += treeList[i].lastModifiedTime
                    html += "</td>";

                    html += "<td>";
                    html += '<span style="display: none">';
                    html += treeList[i].isParent;
                    html += '</span>';
                    html += '<button type="button" onclick="updateDir(this);" class="btn btn-primary btn-xs">重命名</button>';
                    html += "&nbsp;&nbsp;";
                    html += '<button type="button" onclick="delDir(this);" class="btn btn-danger btn-xs">删除</button>';
                    html += "&nbsp;&nbsp;";
                    var dirId = encodeURI(encodeURI(treeList[i].id));
                    var href = ctx + "/file/download?dirId="+dirId;
                    html += '<a href="'+href+'"><button type="button" class="btn btn-info btn-xs">下载</button></a>';
                    if (!treeList[i].isParent){
                        html += "&nbsp;&nbsp;";
                        href = ctx + "/file/view?dirId="+dirId;
                        html += '<a href="'+href+'" target="_blank"><button type="button" class="btn btn-success btn-xs">查看</button></a>';
                    }
                    html += "</td>";

                    html += "/<tr>";

                }
                $("#tabBody").empty();
                $("#tabBody").html(html);
                $("#currDir").val(treeNode.id);
                $("#fileCount").html("(" + treeList.length + ")");
                $("#dirId").val("");
                $("#dirId").next().val("");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $("#currDir").val("");
                $("#fileCount").html("(0)");
                $("#dirId").val("");
                $("#dirId").next().val("");
//                alert(XMLHttpRequest.responseText);
            }
        });
    }



    function createDir() {
        var currDir = $("#currDir").val();
        if (!currDir) {
            alert("当前目录为空！");
            return;
        }
        var dirId = $("#dirId").val();
        var fileName = $("#dirId").next().val();
        if (!fileName) {
            alert("目录名称为空！");
            return;
        }
        if (dirId) {//修改
            $.ajax({
                type: "post",
                url: ctx + "/tree/createDir",
                data: {
                    currDir: currDir,
                    fileName: fileName,
                    dirId: dirId
                },
                dataType: "text",
                async: false,
                success: function (data) {
                    alert("修改名称成功！");
                    reloadNode();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        } else {//添加
            $.ajax({
                type: "post",
                url: ctx + "/tree/createDir",
                data: {
                    currDir: currDir,
                    fileName: fileName
                },
                dataType: "text",
                async: false,
                success: function (data) {
                    alert("创建目录成功！");
                    reloadNode();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        }
    }

    function viewFile(who){
        var dirId = $(who).attr("dirId");

    }

    function updateDir(who) {
        var dirId = $(who).parent().parent().find("input:first").val();
        $("#dirId").val(dirId);
        var fileName = $(who).parent().parent().find("span:first").html();
        var isParent = $(who).prev().html();
        if (isParent == "true") {
            $("#dirId").next().val(fileName);
        } else {
            if (fileName.indexOf('.') > -1) {
                var name = fileName.substring(0, fileName.lastIndexOf('.'));//获取文件名
                $("#dirId").next().val(name);
            } else {
                $("#dirId").next().val(fileName);
            }

        }
    }

    function delConfirm(){
        return confirm("删除确认！");
    }

    function delDirMulit() {
        var dirIdList = "";
        $('input:checkbox:checked').each(function () {
            dirIdList += $(this).val();
            dirIdList += ",";
        });
        if (dirIdList) {
            if (delConfirm()) {
                $.ajax({
                    type: "post",
                    url: ctx + "/tree/delDir",
                    data: {
                        dirIdList: dirIdList,
                    },
                    dataType: "text",
                    async: false,
                    success: function (data) {
                        alert("删除成功！");
                        reloadNode();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            }
        }
    }

    function delDir(who) {
        if (delConfirm()){
            var dirId = $(who).parent().parent().find("input:first").val();
            $.ajax({
                type: "post",
                url: ctx + "/tree/delDir",
                data: {
                    dirIdList: dirId,
                },
                dataType: "text",
                async: false,
                success: function (data) {
                    alert("删除成功！");
                    reloadNode();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        }
    }


    function showModel(){
        $('#myModal').modal('show');
        $("#file").val("");
    }

    $('#upload').on('click', function() {
        var fd = new FormData();
        var fileArr = $("#file").get(0).files;

        fd.append("upload", fileArr.length);
        fd.append("file",fileArr);
        for (var i=0;i<fileArr.length;i++){
            fd.append("file",fileArr[i]);
        }
        var currDir = $("#currDir").val();

        fd.append("currDir",currDir);

        $.ajax({
            url: ctx + "/file/upload",
            type: "post",
            processData: false,
            contentType: false,
            async: false,
            data: fd,
            success: function(d) {
                alert(d);
                $('#myModal').modal('hide');
                reloadNode();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("上传出错，请确认文件大小是否超出 100MB！");
            }
        });
    });


</script>
</body>
</html>